<template>
  <div>
    <!-- 登录框 -->
    <el-dialog
      title="登录"
      :visible.sync="loginf"
      width="30%"
      :before-close="handleClose"
    >
      <!-- 账号 -->

      <el-input v-model="sj.userName" placeholder="请输入账号"></el-input>

      <p></p>
      <!-- 密码 -->
      <el-input
        v-model="sj.password"
        type="password"
        placeholder="请输入密码"
      ></el-input>

      <p></p>
      <!-- 错误提示 -->
      <el-alert :title="warning" type="warning"> </el-alert>

      <span slot="footer" class="dialog-footer">
        <el-button @click="login(1)">取 消</el-button>
        <el-button type="primary" @click="login(2)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: ["loginf"], //接受数据
  data() {
    return {
      sj: {
        //账号数据
        userName: "jiyun",
        password: "password",
      },
      warning: "",
    };
  },
  methods: {
    handleClose(done) {
      //点击关闭按钮
      this.$emit("login1", false);
    },

    login(a) {
      //登陆或者取消时关闭登录框
      if (a == "1") {
        //取消登录时
        this.$emit("login1", false);
      }

      if (a == 2) {
        //用户登录
        this.$axios.post("/api/users/login", this.sj).then((a) => {
          console.log(a)
          if (a.code == "001") {
            //
            //   消息提示

            this.$notify({
              title: "成功",
              message: a.msg,
              type: "success",
            });

            let { user: s } = a;

            // 关闭登录框
            this.$emit("login1", false);
            // id
            sessionStorage.setItem("token", s.user_id);
            //储存用户名
            this.$store.commit("names", this.sj.userName);
          }
          if (a.code === "003") {
            //   用户名验证
            this.warning = a.msg;
          }
        });
        return false;
      }
    },
  },
};
</script>
<style scoped>
span {
  text-align: center;
  color: olivedrab;
  font-size: 17px;
}
</style>